<template>
	<view class="homePage">
		<view class="header">
			<image mode="widthFix" :src="info.headPicture || '../../static/img/default_tx.png'" @click="showHeadPicture(info.headPicture || '../../static/img/default_tx.png')"></image>
			<view class="center">
				<text>{{info.realName}}</text>
				<view>{{info.appellations}}</view>
			</view>
			<view class="attention">
				<image v-if="!info.status" src="../../static/img/healthTeam/attention@2x.png" class="attentionImg"></image>
				<text v-if="!info.status"  @click="addHealth(info)">关注</text>
				<text v-else-if="info.status == 1" @click="cancelHealth(info)">已关注</text>
				<text v-else-if="info.status == 3" @click="cancelHealth(info)">互相关注</text>
			</view>
		</view>
		
		<view class="inMiddle">
			<view class="nav">
				<view>{{info.beAttention}}</view>
				<text>被关注</text>
			</view>
			<view class="nav">
				<view>{{info.followed}}</view>
				<text>关注</text>
			</view>
			<view class="nav">
				<view>{{info.serve}}</view>
				<text>服务人次</text>
			</view>
			<view class="nav">
				<view>5星</view>
				<text>服务评价</text>
			</view>

		</view>
		
		<view class="personalProfile">
			<view class="basicFunctionTitle">
				<image src="../../static/img/index/tips@2x.png"></image>
				<text>个人简介</text>
			</view>
			<view class="profile" v-html="info.individual"></view>
		</view>
		
		<!-- <view class="qualifications">
			<view class="basicFunctionTitle">
				<image src="../../static/img/index/tips@2x.png"></image>
				<text>个人资质</text>
			</view>
			<view class="photo">
				<image v-for="(item,index) in info.imgList" :key="index" :src="item" @click="showImage(item,index)"></image>
			</view>
		</view> -->
		
		<view class="venice" @click="toIM">立即咨询</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				info:{}
			}
		},
		onLoad(options){
			this.id = options.id
			this.getdata()
		},
		methods:{
			getdata(){
				this.$api.findByHealth({healthId :this.id}).then((res)=>{
					this.info = res.data.result
				})
			},
			toIM(){
				 if(this.info.healthRank == 1){
					if(this.info.status != 1){
					 	uni.showToast({
					 		title:'需关注健康管理师后才可咨询！',
					 		icon:'none'
					 	})
					 	return;
					}
				 }else{
					uni.showToast({
					 	title:'请联系健康管理师！',
					 	icon:'none'
					})
					return;
				 }
				const headPicture = this.info.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/5de3289f9e284f33a88d35d9b9bf8b8d.png'
				uni.navigateTo({
					url: encodeURI('/pages/imchat/chat?toUserId='+this.info.codeId+'&name='+this.info.realName+'&headPicture='+headPicture)
				})
			},
			// 关注
			addHealth(e){
				const _this = this;
				_this.$api.addHealth({healthId:e.id,healthNumber:e.healthNumber}).then((res)=>{
					if(res.data.returnCode == 200){
						_this.getdata()
					}
				})
			},
			cancelHealth(e){
				const _this = this;
				_this.$api.cancelHealth(e.uhId).then((res)=>{
					if(res.data.returnCode == 200){
						_this.getdata()
					}
				})
			},
			showImage(item,index){
				uni.previewImage({
					urls: this.info.imgList,
					current: index
				})
			},
			showHeadPicture(img){
				uni.previewImage({
					urls: [img],
					current: 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homePage {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		padding-bottom: 135upx;
		.header {
			display: flex;
			align-items: center;
			width: 750upx;
			background: #38CB97;
			padding: 48upx 24upx 121upx;
			image {
				width: 128upx;
				border-radius: 6upx;
			}
			.center {
				margin: 0 36upx;
				flex: 1;
				text {
					color: #FFFFFF;
					font-size: 34upx;
				}
				view {
					margin-top: 24upx;
					color: #E1FFF5;
					font-size: 26upx;
				}
			}
			.attention {
				min-width: 102upx;
				height: 44upx;
				background: #FFFFFF;
				border-radius: 22upx;
				text-align: center;
				.attentionImg {
					width: 18upx;
					height: 18upx;
					margin-right: 4upx;
				}
				text {
					color: #3CBE8A;
					font-size: 22upx;
				}
			}
		}
		.inMiddle {
			width: 702upx;
			height: 154upx;
			background: #FFFFFF;
			border-radius: 10upx;
			margin: -68upx auto 0;
			display: flex;
			align-items: center;
			.nav {
				flex: 1;
				text-align: center;
				view {
					color: #000000;
					font-size: 38upx;
					font-weight: bold;
				}
				text {
					color: #333333;
					font-size: 30upx;
				}
			}
		}
		.personalProfile,
		.qualifications {
			width: 702upx;
			min-height: 204upx;
			background: #FFFFFF;
			border-radius: 10upx;
			margin:24upx 24upx 0 ;
			padding: 28upx 0 40upx;
			.basicFunctionTitle {
				padding:0 16upx 0;
				image {
					width: 8upx;
					height: 24upx;
					margin-right: 15upx;
				}
				text {
					color: #000000;
					font-size: 34upx;
					font-weight: bold;
				}
			}
			.profile {
				color: #333333;
				font-size: 28upx;
				line-height: 44upx;
				padding: 0 24upx;
				margin-top: 28upx;
			}
			.photo {
				padding: 0 24upx;
				display: flex;
				flex-wrap: wrap;
				margin-top: 40upx;
				image {
					height: 156upx;
					width: 130upx;					
					border-radius: 12upx;
					margin: 0 30upx 24upx 0;
				}
			}
		}
		.venice {
			width: 513upx;
			height: 70upx;
			line-height: 70upx;
			text-align: center;
			background: #38CB97;
			border-radius: 35upx;
			margin: 104upx auto 0;
			color: #FFFFFF;
			font-size: 30upx;
		}
	}
</style>
